<div bsModal #newVoucherBatch="bs-modal" class="modal fade addNew" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
    aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title pull-left">生成优惠券并绑定用户</h4>
                <button type="button" class="close pull-right" (click)="closeModal()" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group form-inline">
                        <span class="control-label width-125">券编号前缀：</span>
                        <input type="text" class="form-control" id="txtGrade" [(ngModel)]="item.prefix" name="prefix" placeholder="券编号前缀">
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">生成开始标识：</span>
                        <input type="text" class="form-control" id="startIdentifier" [(ngModel)]="item.startIdentifier" name="startIdentifier" placeholder="开始标识">
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">优惠券模板：</span>
                        <nz-select style="width: 388px;" name="templateId" nzShowSearch nzAllowClear nzPlaceHolder="选择优惠券模板" [(ngModel)]="item.templateId">
                            <nz-option
                                *ngFor="let option of templates"
                                [nzValue]="option.id" 
                                [nzLabel]="option.name"></nz-option>
                        </nz-select>
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">有效期区间：</span>
                        <input type="text" name="startTime" placeholder="有效期开始时间" style="margin:0;" class="form-control" id="startTime" onclick="laydate({
                            elem: '#startTime',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: '', //设定最小日期为当前日期
                            max: '2099-06-16', //最大日期,
                            start: (new Date()).toLocaleDateString() +' ' + (new Date()).toTimeString(),
                            istime: true,
                            istoday: false,
                            choose: function(datas){
                                endTime.min = datas; //开始日选好后，重置结束日的最小日期
                                endTime.start = datas; //将结束日的初始值设定为开始日
                            }
                        })" [(ngModel)]="item.startTime">
                        <span style="color: #e4e4e4;">---</span>
                        <input type="text" name="endTime" placeholder="有效期结束时间" class="form-control" id="endTime" onclick="laydate({
                            elem: '#endTime',
                            format: 'YYYY-MM-DD hh:mm:ss',
                            min: document.getElementById('startTime').value,
                            max: '2099-06-16',
                            start: (new Date()).toLocaleDateString() + ' 23:59:59',
                            istime: true,
                            istoday: false,
                            choose: function(datas){
                                startTime.max = datas; //结束日选好后，充值开始日的最大日期
                            }
                        })" [(ngModel)]="item.endTime">
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">激活日期：</span>
                        <nz-date-picker
                            nzShowTime
                            name="activedTime"
                            nzFormat="YYYY-MM-DD HH:mm:ss"
                            [(ngModel)]="item.activedTime">
                        </nz-date-picker>
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">定时发送时间：</span>
                        <nz-date-picker
                            nzShowTime
                            name="autoTime"
                            nzFormat="YYYY-MM-DD HH:mm:ss"
                            [(ngModel)]="item.autoJobTime">
                        </nz-date-picker>
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">是否马上启用：</span>
                        <input type="checkbox" class="control-label" name="enabled" [(ngModel)]="item.enabled">
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">说明：</span>
                        <input type="text" style="width:300px;" class="form-control" id="description" [(ngModel)]="item.description" name="description"
                            placeholder="说明">
                    </div>
                    <div class="form-group form-inline">
                        <span class="control-label width-125">上传用户模板：</span>
                        <a class="action-btn">浏览
                            <input type="file" id="excelUploader" ng2FileSelect class="inputFile" [uploader]="excelUploader" >
                        </a>
                        <button class="action-btn" ng-disabled="btnEnabled" (click)="uploadFile()">上传</button>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-2 col-md-10">
                            <button type="submit" class="confirm-btn" (click)="saveAdd()">确定提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>